.pxToRem(@p, @px) {
    @{p}: @px / 75 * 1rem;
}
body {
    background: #CCCCCC;
}
#head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .pxToRem(height,270);
    background: #fff;
    background: linear-gradient(90deg, #d5413e, #fc834a);
    .tou {
        width: 40%;
        .pxToRem(font-size,35);
        .pxToRem(margin-top,100);
        color: #fff;
        .pxToRem(height,80);
        text-align: center;
        display: flex;
        align-items: center;
        img {
            .pxToRem(margin-right,10);
           .pxToRem(height,100);
            .pxToRem(width,100);  
        }
    }
    .shez {
        .pxToRem(margin-bottom,120);
        img {
            width: 90%;
        }
    }
}
.nav {
    width: 100%;
    .pxToRem(margin-top,290);
    background: #FFFFFF;
    p {
        float: left;
        .pxToRem(margin-top,20);
         .pxToRem(margin-left,20);
        .pxToRem(margin-bottom,70);
        .pxToRem(font-size,35);
    }
    .nav-1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: wrap;
        border-bottom: 2px solid #CCCCCC;
        .pxToRem(height,150);
        text-align: center;
        flex-direction: column;
        .dl {
            width: 25%;
            text-align: center;
            .dt {
                .pxToRem(height,80);
                .pxToRem(width,180);
                img {
                    .pxToRem(height,80);
                    .pxToRem(width,80);
                }
            }
            dd {
                text-align: center;
                .pxToRem(width,180);
                .pxToRem(font-size,25);
                .pxToRem(margin-top,5);
                .pxToRem(margin-bottom,40);
            }
        }
    }
}
#main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    border-bottom: 2px solid #CCCCCC;
    text-align: center;
    flex-direction: column;
    .pxToRem(margin-top,15);
    p {
        width: 100%;
        .pxToRem(height,120);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        .span1 {
            .pxToRem(font-size,40);
            .pxToRem(padding-left,25);
        }
        .span2 {
            .pxToRem(font-size,40);
            .pxToRem(padding-right,25);
            color: #C3C4C6;
        }
    }
    .gk {
        .pxToRem(margin-top,15);
    }
}
.yj {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    border-bottom: 2px solid #CCCCCC;
    .pxToRem(height,100);
    text-align: center;
    background: #FFFFFF;
    .dl {
        width: 20%;
        text-align: center;
        .dt {
            .pxToRem(height,70);
            .pxToRem(width,180);
            img {
                .pxToRem(height,70);
                .pxToRem(width,70);
            }
        }
        dd {
            text-align: center;
            .pxToRem(width,180);
            .pxToRem(font-size,25);
            .pxToRem(margin-top,5);
        }
    }
}